<template>
	<div class="notification">
		<template v-for="(item,index) in current_page_message_list||[]">
			<div class="item"
				:class="{show:item.show,show1:!autoClose&&item.show&&(current_page_message_list.length-1)-index===1,show2:!autoClose&&item.show&&(current_page_message_list.length-1)-index>1}"
				:key="item.id" @click="go(item)">
				<div class="pic">

					<!--
					1、货物推广
					2、货物竞标

					3、有车求货竞标
					4、有货求车竞标
					5、小件货源竞标
					6、快递公司竞标

					7、跨境货代竞标
					8、专业代办竞标 -->

					<image :src='serverImageUrl("/static/images/chatbot/1.png")'
						v-if="item.table_type==1||item.table_type==2" mode="widthFix" class="icon"></image>
					<image :src='serverImageUrl("/static/images/chatbot/2.png")'
						v-else-if="item.table_type==3||item.table_type==4||item.table_type==5||item.table_type==6"
						mode="widthFix" class="icon"></image>
					<image :src='serverImageUrl("/static/images/chatbot/4.png")'
						v-else-if="item.table_type==7||item.table_type==8" mode="widthFix" class="icon"></image>
					<image :src='serverImageUrl("/static/images/chatbot/1024.png")' v-else mode="widthFix" class="icon">
					</image>
				</div>
				<div class="info">
					<div class="b">
						{{item.title}}
					</div>
					<div class="message-content">
						{{item.content}}
					</div>
				</div>
				<div class="close" @click.stop="close(item,index)">
					<image :src='serverImageUrl("/static/images/chatbot/close.png")' style="width:35rpx"
						mode="widthFix"></image>
				</div>
			</div>
		</template>
		<div class="closeAll" @click="closeAll">
			<image src="../TUIKit/assets/icon/close-image.png" mode="widthFix"
				style="width:33rpx; margin-right: 8rpx; height:30rpx"></image>
			关闭所有
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				route: "",
				closeAllShow: false,
				current_page_message_list: [{
					id: 1,
					title: "1111",
					content: "撒打飞机可拉伸的防静电卡萨服了假的克里夫圣诞节阿卡丽分类飒沓九分裤斯大林复健科斯大林圣诞节阿卡丽分类飒沓九分裤斯大林复健科斯大林123",
				}, {
					id: 1,
					title: "1111",
					content: "撒打飞机可拉伸的防静电卡萨服了假的克里夫圣诞节阿卡丽分类飒沓九分裤斯大林复健科斯大林圣诞节阿卡丽分类飒沓九分裤斯大林复健科斯大林321",
				}, {
					id: 1,
					title: "1111",
					content: "撒打飞机可拉伸的防静电卡萨服了假的克里夫圣诞节阿卡丽分类飒沓九分裤斯大林复健科斯大林圣诞节阿卡丽分类飒沓九分裤斯大林复健科斯大林213",
				}]
			}
		},
		created() {
			let pages = getCurrentPages();
			let currentPage = pages[pages.length - 1];
			this.route = currentPage.route
		},
		computed: {
			notificationRoute() {
				return this.$store.state.notificationRoute;
			},
			autoClose() {
				return this.$store.state.autoClose
			},
			message_list() {
				return this.$store.state.socketIsShow.message_list
			}
		},
		watch: {
			message_list(n) {
				this.animation(n[n.length - 1])
			},
			current_page_message_list() {
				if (this.current_page_message_list.length > 1) {
					this.closeAllShow = true;
				} else {
					this.closeAllShow = false;
				}
			}
		},
		methods: {
			closeAll() {
				this.closeAllShow = false;
				this.current_page_message_list.forEach(item => {
					item.show = false;
				})
				setTimeout(() => {
					this.current_page_message_list = [];
				}, 400)
			},
			animation(nItem) {
				var index = this.current_page_message_list.length;
				var nItem = JSON.parse(JSON.stringify(nItem));
				this.current_page_message_list.push(nItem);
				setTimeout(() => {
					nItem.show = true;
				}, 100)
				if (this.autoClose) {
					setTimeout(() => {
						nItem.show = false;
						this.closeOne();
					}, 5000)
				}

			},
			close(item, index) {
				item.show = false
				setTimeout(() => {
					this.current_page_message_list.splice(index, 1)
				}, this.autoClose ? 300 : 150)
			},
			closeOne() {
				setTimeout(() => {
					if (!this.autoClose) {
						this.current_page_message_list.pop()
					} else {
						this.current_page_message_list.shift()
					}
				}, this.autoClose ? 300 : 150)
			},
			go(item) {
				if (item.path == '/pages/tabbar/message/index') {
					uni.switchTab({
						url: "/TUIKit/components/TUIConversation/list"
					})
					item.show = false;
					this.closeOne();
				} else {
					uni.navigateTo({
						url: item.path
					})
					item.show = false;
					this.closeOne();
				}

			}
		}
	}
</script>

<style lang="scss">
	.notification {
		position: fixed;
		top: var(--status-bar-height);
		left: 0;
		width: 100%;
		height: 150rpx;
		// background: rgba(0, 0, 0, 0.5);
		z-index: 99999;
		padding-top: 30rpx;

		.item {
			background-color: #fff;
			border-radius: 36rpx;
			position: absolute;
			width: 90%;
			left: 5%;
			box-shadow: 0 4rpx 4rpx #C7C7C7;
			display: flex;
			color: #6D727E;
			padding: 20rpx;
			box-sizing: border-box;
			font-size: 24rpx;
			transform: translate3d(0, -150%, 0);
			transition: .3s ease;
		}

		.message-content {
			margin-top: 8rpx;
		}

		.info {
			width: 100%;
		}

		.pic {
			display: flex;
			align-items: center;
			justify-content: center;
			flex-shrink: 0;
			margin-right: 16rpx;
			width: 115rpx;
			height: 115rpx;
			border-radius: 20rpx;
			background: linear-gradient(#efefef, #dfdfdf);

			.icon {
				width: 110rpx;
				max-height: 115rpx;
				max-width: 115rpx;
				border-radius: 20rpx;
			}
		}
	}

	.b {
		color: #000;
		font-weight: bold;
		font-size: 24rpx;
	}

	.show {
		transform: translate3d(0, 0, 0) !important;
	}

	.show1 {
		transform: translate3d(0, 20rpx, 0) scale(.9) !important;
	}

	.show2 {
		transform: translate3d(0, 40rpx, 0) scale(.8) !important;
	}

	.closeAll {
		display: flex;
		align-items: center;
		justify-content: center;
		position: absolute;
		background-color: #fff;
		border-radius: 40rpx;
		padding: 10rpx 20rpx;
		top: 250rpx;
		left: 50%;
		transform: translate3d(-50%, 0, 0);
		font-size: 24rpx;
		font-weight: bold;
		box-shadow: 0 4rpx 4rpx #C7C7C7;
	}
</style>